<template>
  <div class="container">
    <!-- 导航条 -->
    <van-nav-bar left-arrow @click-left="$router.back()" title="编辑资料"></van-nav-bar>

    <!-- 编辑区 -->
    <van-cell-group>
      <van-cell is-link title="头像"  center @click="hShowSelecImage">
          <!-- 设置一个隐藏 文件域 触发后进行文件上传-->
          <input type="file"  @change="hPhotoChange" hidden ref="refPhoto">
        <van-image
          slot="default"
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          round
          :src="user.photo"
        />
      </van-cell>

      <van-cell is-link title="名称" :value="user.name" @click="showName=true"/>

      <van-cell is-link title="性别" :value="user.gender === 1? '男':'女'" @click="showGender=true"/>

      <van-cell is-link title="生日" :value="user.birthday" @click="showBirthday=true"/>
      <!-- 修改名字  -->
      <van-dialog
        v-model="showName"
        title="修改名字"
        show-cancel-button
        @confirm="hSaveName">
        <van-field v-model.trim="newName" />
      </van-dialog>
      <!-- 修改 性别 -->
      <van-popup v-model="showGender" position="bottom">
        <van-nav-bar title="修改性别" left-text="取消" @click-left="showGender=false">
        </van-nav-bar>
        <van-cell title="男" @click="hSaveGender(1)" is-link></van-cell>
        <van-cell title="女" @click="hSaveGender(0)" is-link></van-cell>
      </van-popup>
      <!-- 修改生日 -->
       <van-popup v-model="showBirthday" position="bottom">
        <van-nav-bar title="修改生日">
        </van-nav-bar>
        <!-- min-date：  dateTime-picker中最小时间 -->
        <van-datetime-picker
          v-model="newDate"
          type="date"
          title="选择年月日"
          @cancel="showBirthday=false"
          @confirm="hSaveBirthday"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-popup>
    </van-cell-group>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { userGetInfo, updateUserInfo, updatePhoto } from '@/api/user.js'
export default {
  name: 'userProfile',
  data () {
    return {
      // 控制弹层
      showName: false,
      showGender: false,
      showBirthday: false,

      // 当前用户的信息
      user: {},

      // 修改后的新名字
      newName: '',
      // 修改后新生日
      newDate: new Date(),
      minDate: new Date(1965, 0, 10), // dateTime-picker中最小时间
      maxDate: new Date() // 当前时间
    }
  },
  created () {
    this.loadProfile()
  },
  methods: {
    // 加载数据 渲染数据
    async loadProfile () {
      const result = await userGetInfo()
      this.user = result.data.data
    },
    // 编辑名字
    async hSaveName () {
      // 1. 判断不能为空
      if (this.newName === '') {
        return
      }
      if (this.newName.length > 7) {
        this.$toast.fail('名字长度不能超过7个字符')
        return
      }
      this.$toast.loading({
        duration: 0, // 持续展示 toast,永远不会关闭
        overlay: true, // 整体添加一个遮罩
        message: '操作中...'
      })
      try {
        // 2. 调用api,更新名字
        const result = await updateUserInfo({
          name: this.newName
        })
        console.log(result)
        // 3. 更新视图
        this.user.name = this.newName
        this.newName = ''
        this.$toast.success('修改成功')
      } catch {
        this.$toast.fail('修改失败')
      }
    },
    // 修改性别
    async hSaveGender (num) {
      // 在别人调用toast才会替换掉toast显示的内容
      this.$toast.loading({
        duration: 0,
        overlay: true,
        message: '操作中'
      })
      try {
        const res = await updateUserInfo({
          gender: num
        })
        console.log(res)
        this.user.gender = num
        this.showGender = false
        this.$toast.success('成功')
      } catch (error) {
        this.$toast.fail('修改失败')
        this.showGender = false
      }
    },
    // 修改生日
    async hSaveBirthday (val) {
    // val指的是选择的时间
      val = dayjs(val).format('YYYY-MM-DD')
      this.$toast.loading({
        duration: 0, // 持续展示toast不会关闭
        overlay: true, // 显示遮盖层
        message: '操作中.....' // 显示提示信息
      })
      try {
        const res = await updateUserInfo({
          birthday: val
        })
        console.log(res)
        this.user.birthday = val
        this.showBirthday = false
        this.$toast.success('成功')
      } catch (error) {
        this.$toast.fail('修改失败')
        this.showBirthday = false
      }
    },
    // 点击点击上传图片操作 触发选择文件
    hShowSelecImage () {
      this.$refs.refPhoto.click()
    },
    // 文件是否上传的操作
    async hPhotoChange () {
      // 获取到文件数据
      const file = this.$refs.refPhoto.files[0]
      // 判断是够存在
      if (!file) {
        return undefined
      }
      this.$toast.loading({
        duration: 0, // 持续展示 toast,永远不会关闭
        overlay: true, // 整体添加一个遮罩
        message: '操作中...'
      })
      try {
        const fd = new FormData()
        fd.append('photo', file)
        const res = await updatePhoto(fd)
        this.user.photo = res.data.data.photo
        // 修改成功之后  进行保存
        this.$store.commit('mSetUserPhoto', this.user.photo)
        this.$toast.success('修改成功')
      } catch (err) {
        this.$toast.fail('修改失败')
      }
    }
  }
}
</script>
